<template lang="">
    <div class="activeEdit">
    <ElForm  ref="activeEdit"  class="demo-ruleForm" label-position="left" :rules="activeRules" :model="store" validate-on-rule-change="false">
      <ElFormItem label="推广渠道" prop="optionsVid" required>
       <ElCascader
            name="optionsVid"
            v-model="store.optionsVid"
            :options="store.options"
            width="500"
            :props="{ multiple: true, checkStrictly: true }"
            clearable>
       </ElCascader>
       </ElFormItem>
       <ElFormItem label="订购渠道" prop="checkedCities" required >
          <ElCheckboxGroup v-model="store.checkedCities" @change="handleCheckedCitiesChange">
            <ElCheckbox v-for="city in store.cities" :label="city" :key="city" name="checkedCities">{{city}}</ElCheckbox>
          </ElCheckboxGroup>
          <div class="el_checkall">
            <ElCheckbox :indeterminate="store.isIndeterminate" v-model="store.checkAll" @change="handleCheckAllChange">全选</ElCheckbox>
          </div>
     </ElFormItem>
       <ElFormItem>
          <span @click.prevent="activeSubmitForms('ruleForm')"></span>
  </ElFormItem>
</ElForm>  
    </div>
</template>
<script>
import { toRefs } from "vue";
import { store, activeRules, activeSubmitForms, activeEdit } from "./FormInfo";
import {
  ElForm,
  ElFormItem,
  ElCheckbox,
  ElCheckboxGroup,
  ElCascader,
  ElInput,
} from "element3";

export default {
  components: {
    ElForm,
    ElFormItem,
    ElCheckbox,
    ElCheckboxGroup,
    ElCascader,
    ElInput,
  },
  setup(props) {
    const handleCheckAllChange = (val) => {
      store.checkedCities = val ? store.cities : [];
      store.isIndeterminate = false;
    };
    const handleCheckedCitiesChange = (value) => {
      let checkedCount = value.length;
      store.checkAll = checkedCount === store.cities.length;
      store.isIndeterminate =
        checkedCount > 0 && checkedCount < store.cities.length;
    };
    return {
      store,
      activeRules,
      handleCheckAllChange,
      handleCheckedCitiesChange,
      activeSubmitForms,
      activeEdit,
    };
  },
  methods: {},
};
</script>
<style lang="scss">
.activeEdit {
  width: 100%;
  height: 100%;
  .el-input__inner {
    width: 400px;
  }
  .el-cascader {
    margin-left: 43px;
  }
  .el-checkbox-group {
    margin-left: 42px;
  }
  .el_checkall {
    margin-left: 121px;
  }
}
</style>